<template>
  <section>
    <van-nav-bar title="异常调整详情"
                 fixed
                 @click-left="onClickLeft"
                 @click-right="onClickRight">
      <van-icon name="arrow-left"
                slot="left"
                color="#333"
                size="0.6rem" />
      <van-icon :name="require('@/assets/img/computer.png')"
                slot="right"
                color="#333"
                size="0.6rem" />
    </van-nav-bar>

    <div class="container">
      <div class="sub">
        <van-cell title="调整原因"
                  :value="setPageres(this.changeData.modifyReason)"
                  size="large"
                  is-link
                  @click="changePick" />
        <van-action-sheet v-model="showPick"
                          :round="false"
                          :actions="actionsPick"
                          @select="onSelectPick"
                          cancel-text="取消"
                          @cancel="onCancelPick" />
        <van-field label="调整金额"
                   v-model="changeData.abnormalFee"
                   size="large"
                   input-align="right"
                   placeholder="请输入"
                   maxlength="10"
                   type="number"
                    />

        <van-cell title="上传凭证"
                  size="large"
                  required
                  label="(支持上传：.jpg、png格式图片，最多可上传5张）"
                  :border="false"
                  label-class="cell-label" />
        <van-cell>
          <div style="padding:10px 0;">
            <van-uploader v-model="fileList"
                          :before-read="asyncBeforeRead"
                          :before-delete="beforeDelete"
                          :max-count="5"
                          multiple
                          preview-size="1.6rem" />
          </div>
        </van-cell>
      </div>
    </div>

    <div class="footer">
      <div class="btn-wrap">
        <div class="btn-left"
             @click="handelCanel">
          <span>取消</span>
        </div>
        <div class="btn-right"
             @click="handelSure">
          <span>保存</span>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import Vue from 'vue';
import { Uploader } from 'vant';

Vue.use(Uploader);
import { compressor } from '@/utils/utils';
export default {
  data () {
    return {
      fileList: [],
      uploadImg: [], // 已上传图片数组
      value: '',
      showPick: false,
      actionsPick: [
        { name: '超时', index: 1 },
        { name: '破损', index: 2 },
        { name: '丢失', index: 3 },
        { name: '其他', index: 4 }
      ],
      changeData: {
        abnormalFee: '',
        modifyReason: 3,
        imageUrl: []
      }
    };
  },
  mounted () {
    this.edit = this.$route.query.edit;
    if (this.edit != 'new') {
      let data = sessionStorage.getItem('bd-h5-selecterror') || [];

      if (data) {
        this.changeData = JSON.parse(data)[parseInt(this.edit)];

        if (this.changeData && this.changeData.imageUrl) {
          this.changeData.imageUrl.map(item => {

            this.fileList.push({ url: `https://${item.imageUrl}` });
          });
        }
      }
    }
  },
  watch: {

  },
  methods: {
    onSelectPick (item) {
      this.showPick = false;
      this.changeData.modifyReason = item.index-1;
      console.log(item);
    },
    onCancelPick () {
      this.showPick = false;
    },
    changePick () {
      this.showPick = true;
    },
    setPageres (index) {
      return this.actionsPick[index].name || '';
    },
    asyncBeforeRead (file, detail) {
      return new Promise((resolve, reject) => {
        console.log(file);
        compressor(file)
          .then(res => {
            // this.parm.imageAddress = "https://"+res
            console.log(detail);
            this.changeData.imageUrl.push({
              imageName: file.name,
              imageUrl: `${res}`
            });
            resolve();
          })
          .catch(error => {
            // 上传失败
            reject();
            this.$toast.fail(error);
          });
      });
    },
    beforeDelete (file, detail) {
      this.changeData.imageUrl.splice(detail.index, 1);
      return true;
    },
    onClickLeft () {
      this.$router.back();
    },
    onClickRight () {
      let url = window.location.host;

      let index = url.indexOf('pre');

      if (index <= -1) {
        window.location.href = 'https://ka.lecarlink.com/index.aspx';
      } else {
        window.location.href = 'https://ka-pre.lecarlink.com/index.aspx';
      }
    },
    handelCanel () {
      this.$router.back();
      console.log('handelChangeOrder');
    },
    handelSure () {
      // let reg = /^(-)?\d+(\.\d+)?$/;
      let reg = /^(-)?\d+(\.+\d{0,2})?$/; // 正负数两位小数

      if (!reg.test(this.changeData.abnormalFee)) {
        this.$toast.fail('请输入正确的金额');
        return;
      }
      if (this.changeData.imageUrl == 0) {
        this.$toast.fail('请上传图片');
        return;
      }
      let data = sessionStorage.getItem('bd-h5-selecterror') || [];

      if (data) {
        data = JSON.parse(data);
      } else {
        data = [];
      }
      console.log(data);
      if (this.edit != 'new') {
        data[this.edit] = this.changeData;
      } else {
        data.push(this.changeData);
      }
      sessionStorage.setItem('bd-h5-selecterror', JSON.stringify(data));
      this.$router.back();
      console.log('handelSure');
    }
  },
  components: {

  }
};
</script>

<style scoped lang='scss'>
.container {
  background: #f8f8f8;
  padding: 56px 15px 10px 15px;
  font-size: 16px;
  .sub {
    background: #ffffff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    .cell-label {
      font-size: 12px;
    }
  }
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  text-align: center;
  .btn-wrap {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn-left {
      background: #fdf3e4;
      border: 1px solid #f18d00;
      border-radius: 2px;
      color: #f18d00;
      font-size: 18px;
      width: 47%;
      height: 44px;
      line-height: 44px;
      box-sizing: border-box;
    }
    .btn-right {
      width: 47%;
      height: 44px;
      line-height: 44px;
      font-size: 18px;
      background: #f18d00;
      border: 1px solid #f18d00;
      box-sizing: border-box;
      border-radius: 2px;
      color: #fff;
    }
  }
}
</style>
